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We Value Your Feedback 


Don’t forget to submit your Think 2020 session and speaker feedback! Your feedback is very 
important to us — we use it to continually improve the conference. 


Access the Think 2020 agenda tool to quickly submit surveys from your smartphone or laptop. 


3 Think 2020 


DV. INtHOMUCTION i iscesecvccsccceeceveticateeseccascccesseveccusescvencvessevedcnesevesvedecenesedesnebeu ssevcdseneverccesecteseteucsesd evened 5 
4. A BUSINESS SCOMANIO ss cssas-secsecedestcanssictesaneestzetedashedestnedeesteceazitedsstvacazbscaasdeaenst Podsseecaathsebestcceattivassieeasthcagasice 6 
2 Validate lab CnvirONMe@nt..c..:0:.sccececcesssccccnsossesesecsssesscocesescseecccndeseeseseossuievecssseedsrsecesdssedccnsussssesecs 7 
3 Tour Studio and Application Designer.............scssssccscsssccsssccccnsscccsssceccessccnssseccessconsssescnssconessesones 10 
3.1 Tour Business AUTOMATION StUCIO.........cccccesccsssecesseccsssecessaeccssaecessaecesesecessaeceseaeseseaeseseaeceseaeseseaeeesaas 10 
3.2 REVIGW TOOIKICS visessceczedtcteds cected tuted scuezhaccheagebetad sdieidens cad deiviacheteaddhed obs a ddbeadeheled cbieddeweted savele dee seuiel anes 12 
3.3 REVIEW TIM Plates i sssccvessacvazesctesscevesccccescecediecedeacaceesescbunecediedaatucaceeidbaabueedadiedaabicaceeieacdinbetediedadviaseveds: 14 
4:Create: Business APpliCatiOn wsveissccicescecsivssvsnnsscsnvercosessconeccesocesteosssevensssecessscesesennuysavenseesensveseens 16 
4.1. Create Starting Page-and Previews. csicccas costs Wk. dodedetedueiodedleeedu sted ccddusevdeecdieeditausceddecthasedds 16 
4.2 Finish the Starting Page.........cscccsssccssssccssseecssseecssseecsseecsseecsseeceseecssaeecesaeecesaeecssaeecesaeesesaeesesaeesssaeeses 20 
4.3 Create the Results and Onboarding Started Pages ........cccccsssecessecssseecssseecsseecesaeecesaeecesaeecssaeessaeeees 26 
4.4 Preview the Completed App........sscccsscccsssecssseccssscecssseecssneeceseecssaeecesaeecesaeecssaeecesaeecesaeecesaeesesaeeseaeeees 29 
5 Deploy and RUN the Apperscscccesccesscasiscesscsisccasscesscsterceisccstccssscedscessccesscessdestccedtcssscestscestontscetsecess 31 
BU TOUr NAVISAtOn cscscissadesscctcassactescdtecsedes .gedtussades desdbecaaaes socateesadesdseetsaatatessuetesadatedsaeleestttecdiVieastnieasiieds ees 31 
B2 DEPLOY TAGADD wessccsuecs ccascecautécibesieesuncccsbiielageiibetiectusdscauysscaaddchbaliectuada ceasas dua haselectundaceussacdusdestehsbeteste 33 
5.3) Run the: App. In NAVI Satori: sin sctiei testes cetetestenn ste eed dbhe sean Lint oeadhs ieeed cet Ln eee ets 36 
6 Conclusion and Next Steps sisi. .csesissecsdsicevcadeatecetecdssiecsiedsves cess ncedascetedacedeuss seaveeaecevasceaddecsdvees’ 38 


4 


Think 2020 


1 Introduction 


Welcome to Cloud Pak for Automation! 


Increase productivity, resiliency, scalability with low-code design tools and solutions infused with AI. 


Client and Partner Applications 


Unified User Experience 


O 
v 


ODA 
OOOO 
Digital Workers Automation Services 


Modeling Pre-Integrated Automation Capabilities Governance 


eth a at 


Workflow Decisions Content 
Low-code authoring for business and IT 


Operational Intelligence 
Analytics | Machine Learning | AI 


CS BG aes 


Cloud Hybrid On-premises 


In this lab you will experience Business Automation Studio (or Studio for short), the single authoring and 
development environment for Cloud Pak for Automation. Studio is designed so everyone can author 
applications with low-code tools and extend automation business services with toolkits. You will use 
Studio to connect four integrated Cloud Pak for Automation capabilities: 

e Application Designer: a low-code application designer for business users to create business 
applications (apps) that use the platform's capabilities. 

e Business Automation Workflow (BAW): automation and orchestration of multiple business 
processes — straight-through, human-assisted or case management — to provide visibility into each 
step. 

e Operational Decision Manager (ODM): business rule-based decisions to remove manual work from 
processes to improve business agility and increase IT scale. 


e FileNet Content Manager: collect, govern, manage and enrich enterprise content throughout your 
business application. 


> Think 2020 


1.1 Business Scenario 


The app you will build is for request approval before launching a core onboarding business process. This 
app will ease exceptions that occur during the onboarding process by validating requests early before they 
are submitted downstream. Additionally, creating this app is easier for the business users and does not 
require any modification to core onboarding business process which may be scheduled later based on 
development availability. 


The user will enter data, gather content (stored in the enterprise content repository), determine eligibility 
(using an existing decision model powered by business rules) and optionally launch the relevant core 
onboarding process (running in the enterprise business process management system). Below isa 
milestone diagram from IBM Blueworks Live that depicts the steps of your app. 


Pre-Approval Request 


Enter Data > Gather Content b Determine Eligibility |)» Start Onboarding 
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2 Validate lab environment 


First, we need to validate the lab environment started successfully. 
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1. Once you get your environment assigned, you will reach a screen similar to the following: 


VMs: 4 


* Sort by name 


| ee | ee | ee J 


@ VM 1 - OCP master VM 2- OCP compute1 ¥ VM 3 - OCP compute2 @ VM 4 - Workflow-Datacap 
Endpoints: 1 (master - 10.0.0.10) Endpoints: 1 (computet - 10.0.0.20) Endpoints: 1 (compute? - 10.0.0.30) Endpoints: 1 (wf-de-poc - 10.0.0.40) 


= 


call | - | 

| 
| 
( . = 


STORAGE 
50GB 


Ensure that all VMs are in a Running state with green indicators as above. If not, click the top Play 
button to start all VMs in sequence. 


VMs: 4 
7 Py] Sort by name + 
Powered off > Powered off 
% VM 1 - OCP master 4 VM 2-OCP, 
Endpoints: 1 (master - 10.0.0.10) Endpoints: 1 (c 


Once green, click on the screen of VM 1 — OCP master to open a new browser tab/window. 


| ee 


# VM 1 - OCP master 
Endpoints: 1 (master - 10.0.0.10) 


Press SPACE (or click and drag the bottom of the screen to the top) and then click Not Listed? and 
login with root / passwOrd. 


Not listed? 


Next 


It is recommended to fit the desktop to your monitor using the toolbar at the top, click the button 
outlined in red below: 


Ctrl-Alt-Del [EW EN 


Double-click to open a Firefox browser. 


8. 


On the right, click to open the cp4a-poc project. 


+ Create Project 


5 of 13 Projects 


9. On the Overview tab, scroll and confirm that all pods are ready with a solid, bright blue circle 


around a number 1 or greater. 


cp4a-cmis-deploy 


https://cmis.10.0.0.10.nip.io & 


10. Click the arrow to open the top Skytap menu bar open and select the left most button to open a list 
of all VMs, then click VM 4 — Workflow. 


cp4a-cmis-deploy, #3 


It m@ ©) CtAt-De: GEREN MF al 


Environment VMs _ View all VMs (4) 


ig) 


VM 1 - OCP master 


VM 2 - OCP computet 


lorkflc 


VM 3 - OCP compute2 


VM 4 - Workflow-Datacap 


11. Confirm there is no command prompt on the screen which indicates the Workflow server has 
started automatically. If there is acommand prompt (as pictured below), wait for it to disappear. 


m (© Ctr-alt-Del REN 


SQuirrel SQL 


DMU31@@1: Reading configuration for se 
DMU32@91 = 
ADMU3 04 ver dngr open for e-business; p 
AW DMGR started 


Starting BAW Node Agent 

SWUPOG@H1I: Running configuration action detectNewProdu 

ADMUG116I1-: Tool information is heing logged in file 
=\IBM\Workf low\v19 .@\prof iles\Node1i Prof ile\ 

-. log 

ADMUG128I: Starting tool with the NodeiProfile profile 

ADMU31@@I: Reading configuration for serve nodeagent 
launched. Waiting s 


starting B 
"WU POBBB1 I 
DMUG116 on is heing logged in file 


\v19 .@N\prof iles\Node1 Prof ile\ logs’ 


ing tool with the Ne 
configuration f 


file profile 
SingleClusterMembert1 
: Server launched. Waiting for initialization status. 


FileZilla Client Start DMGR 
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erver launched. Waiting fo t zation status. 


figuration action detectNewProducts.ant 


ROG al 


\nodeagent\startServe 


SingleClusterMember1 


12. From the bottom Windows taskbar, open a Firefox browser and on the bookmark bar, open 
Workflow -> Process Portal. 
CPE ODM [Workflow | Fj Others [5 Not Installed 
(or) 
13. Login with adam / passwOrd and you should see an empty Process Portal. Note, the first time the 
server Starts, this may take some time (even a minute or more) to fully load the page as depicted 
below. 


0 On Track 


Total as 
Open | o overdue 


7] Process Performance 


4% Team Performance 


Launch 


Advanced HR Open New 
Position 


Congratulations, your lab environment is started successfully! You may choose to use either VM 4 if you 
are comfortable with Windows or go back to VM 1 if you prefer Red Hat Enterprise Linux. 
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3 Tour Studio and Application Designer 


Let’s start our lab with a tour of Studio and Application Designer, then we will create our business app from 
scratch! 


3.1 Tour Business Automation Studio 
Now, let’s take a look at the Business Automation Studio interface, the single authoring and development 
environment for Cloud Pak for Automation and the entry point to various designers to help you reach your goals. 
1. Ifyou do not have Firefox still open, start it now. 
2. Onthe bookmark bar, click Studio to open the Studio environment. 


S&S Openshift Web Console | Navigator 


3. Ifnot already logging in to another Cloud Pak for Automation interface, login with adam / passwOrd. 


The Studio home page provides access to all capabilities currently available. For this lab, scroll down to 
see Apps, Templates and Toolkits. 


Start building 
[ ] C3 
a 00 
oo 
Apps Templates Toolkits 
Automate work by quickly building user Create a template as the basis for apps Create toolkits to enable users to share 
interfaces that integrate tasks and data library items across applications (apps) 
Viewall + 


Viewall > Viewall > Create + 


= IBM Cloud Pak for Automation 


6. See the same capabilities as well as a Home screen link and the Studio’s Administration page for 
managing access and additional settings. 


IBM Cloud Pak for Automation 
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Click the notification bell at the upper-right to expand the area for notifications such as new 
deployments. None are listed now. 


Notifications 


No new notifications 


Finally, click the name adam at the upper-right and click Preferences. 


© adam adam 


Preferenc 


We already know that adam is a Studio Administrator (as we saw Administration in the left side menu). 
Here, we see adam’s preferences is set to Advanced. This means that they see additional capabilities in 
Studio such as Toolkits that are reserved for advanced users including technical analysts and 
developers. 


User preferences ta 


Locale 


English v 


View mode ® 


[ @) Advanced 


Cancel Submit 


10. Make sure to keep adam’s preferences set to Advanced as above and click Submit. 
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3.2 Review Toolkits 


First, as adam, we will review the toolkits provided by developers in our organization. Later, we will take on the 
role of a business user app assembler who is responsible for using these toolkits and the artifacts they contain 
to assemble an app. 


1. Scroll to the bottom of the home page and click the Toolkits tile. If you click Create by accident, just 
click Cancel and try again. 


SS 


Toolkits 


Create toolkits to enable users to share 
library items across applications (apps) 


=—- 


This is a list of all the toolkits in Studio. There are three types of toolkits: 


a. System toolkits: provided with the base Studio and contain the basic building blocks for apps. 
These include System Data and UI Toolkit. 


b. Services toolkits: provided by IBM and include reusable components that you can use in your 
apps as a low-code way to leverage various Cloud Pak for Automation capabilities. These 
include Content Services (for FileNet), Decisions (for ODM) and Workflow Services (for BAW). 


c. App toolkits: created by Studio authors, these include more reusable components that are 
specific to the business. They may encapsulate components from the above toolkits to make 
them easier to use for app assemblers. 


Remember, these toolkits are created by Advanced users such as developers. 
2. Click Pre-Approval Utilities to open this app toolkit created for our lab today. 


G wi: 


Pre-Approval Utilities 


etails > 


3. Move your mouse to the left side and click the top icon to open a list of all the artifacts in the toolkits. 


3M Cloud Pak for Automation 


Back to toolkits / 


Pre-Approval Utilities 


[ Toolkit Settings v 


Overview App Resource 


Y Common 
$02 Name: Pre-Approval Utilities 
4. You see the following: 


a. Actions: three actions that leverage various services in the platform to get IDs, make decisions 
(using ODM) and launch processes (using BAW). 
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b. Business Objects: one object that contains all data for the customer. 
c. Views: views for content management and the customer object to ensure UX consistency. 
d. Theme: a set of colors and fonts and allow for a consistent theme throughout our app. 


# Determine Pre-Approval 
# getCustomeriD 
Onboard Customer 


® customer 


[a] Approval Content 


[i Customer 


Theme 


© Approval Theme 
5. Ifyou wish, you can click any of these artifacts to explore them more. Do not edit them but feel free to 
review. 
Once done, in the upper-left corner, click Back to toolkits to return to the Studio toolkit list. 


BM Cloud Pak for Automation 


Pre-Approval Utilities 


7. Click the three-bar menu at the upper-left and click Home. 


IBM Cloud Pak for Automation 
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3.3 Review Templates 


You have now reviewed the toolkits available from the development team. Let’s change to a business user and 
take on the role of an app assembler. 


1. At the upper-right, click adam and then click Log out. 
2. Login as alice / passwOrd. 


3. Scroll down and notice that Alice only has access to create Apps and use (but not create) Templates. 
This is the role of an app assembler 


Start building 
0 o | 
oo 00 
Apps Templates 


Automate work by quickly building user Create a template as the basis for apps 
interfaces that integrate tasks and data. 


Viewall > Viewall — 


4. Click the Templates tile to open the list of all templates in Studio. 
Templates (3) QQ Recently updat 


¥ Displaying 3/3 projects 


naa wi: rs wy: aes wi: 
a 
Pre-Approval Template MortgageAppTemplate DL Flooring Template 
Template for apps in the mortgage App template for all DL Flooring Apps 
department 
New app + details > New app + Details > New app + Jetails > 


Templates are a predefined starting point that you can use to create an app and typically represent a 
common-use case pattern. In this case, approval. 

5. Click Pre-Approval Template to open and review the template before we use it. If you click New app by 
accident, just click Cancel and try again. 


eeeq vw : 


New app + Details > 


6. You see the Starting Page format including a header, footer, content box and button and you can add 
your own views once you create an app from this template. 
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| Pre-Approval Template (Read-only) 


Page: StartingPagev 2 


Approval 
===7= Department 


©IBM, 2020 


Looks good, time to create our business app! 
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4 Create Business Application 


Now that we know what resources are available to us as an app assembler, it is time to create our business app. 


4.1 Create Starting Page and Preview 


1. Ifyou are still looking at the Pre-Approval Template, in the upper-left, click Back to templates to return 
to the Studio template list. If you are in Studio, make sure you click the menu at the upper-left and click 
Templates. 


BM Cloud Pak for Automation 


Pre-Approval Template 


2. Onthe Pre-Approval Template tile, click the New app + link to create a new app from the template. 
ese we: 


ne 


Pre-Approval Template 


sida 


3. EnterMy Pre-Approval for the name. 


Create an app 


Name 
My Pre-Approval 


4. Review the other settings, note the template version may not be the same as below, and click Create. 
Open in Designer 


Select a base template and snapshot 


Pre-Approval Template (PAT) x v 


V2.0 (V2.0) x v 


v 


Cancel Create 
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5. You are presented with the default starting page (from the template) and are now ready to assemble 
your business app by dragging views from the palette on the right to the page editor on the left. 


[) My Pre-Approval 


Page: StartingPagev 2 


= Approval 


-= Department 


Drag and drop to build your page 


Building blocks 


All ad 


lee 
$8 
| @ 
-) 
i 3 
| 2 
cf 
o 


©IBM, 2020 
6. Onthe right side, search for panel. 


Drag and drop to build your page 


Building blocks 


ee 


Collapsible Panel 
panel 


©, Search for a buiding block 


om Vv 


Approval Button ‘Check box Collap... 
Content panel 


Fs states el cael 


v 


7. Click and drag the Collapsible panel from the right side into the content box on the left side. 


a 
Drag and drop to build your page 


ESS Se aca 
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If the name is not highlighted, click the collapsible panel and then click the pencil icon that appears at 
the bottom left of the panel to edit the name. 


9. Click the panel again and click the gear icon that appears at the bottom left of the section to open its 
properties. 


10. Click the Configuration tab, expand Behavior and set the Panel group name to PG1. 


Properties 


General Configuration 


Initially collapsed © 


Panel group name: © 


This allow us later to add additional panels to the same group and create an accordion where only one 
panel is expanded at a time. 


11. Expand Appearance and set the Color style to Info. 
Color style: © 


12. Click OK and test the collapsible panel by clicking it a few times to expand and collapse. 
13. Leave the panel expanded, search the right side for customer and click and drag the Customer view 
inside the collapsible panel. 
i Drag and drop to build your page 


a= —— 


All xf 


1 
if 
| 
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14. In the Data association dialog that appears, leave the default which creates a new variable named 
customer, and then click OK. 


Data association 


Data mapping 
This mapping links the component to a new or existing variable so 
you can reference the data /ater 


Select existing 


New variable name 


® 


Note the Customer view from the toolkit is displayed and can now hold data from our app’s new 
customer variable. Let’s preview our app! 
15. In the upper-right, click Preview to deploy and run the current version of our app in the playback 
application engine. Wait a few seconds for a new browser window to appear and you can try out the 
app, collapsing and expanding the panel and entering data. 


Last updated seconds ago by you 


"a 


Congratulations, you have a working business app! 
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4.2 Finish the Starting Page 


Let’s finish the starting page and also integrate to two of our Cloud Pak for Automation capabilities: Content 
(FileNet) and Decisions (ODM). 


1. Ifthe preview browser window is still open, close it and go back to the My Pre-Approval app editor. 


Back to apps / 
My Pre-Approval 

Last updated seconds ago by you 
[) My Pre-Approval > 


Page: StartingPagev @ 


Drag and drop to build your page 


= = Approval - 
= SSEF= Department Building blocks 
All bd 
Customer info a ©, customer 
[i..3 
First Name Last Name 
Customer 


Make sure the Customer info collapsible panel is expanded and scroll to the bottom. 
Page: StartingPagev PB 


City State Zip 


| Note, you can also add simple views to your page that do not exist in a toolkit, let’s try that now. 


2. Search on the right for a horizontal layout and drag it within the collapsible panel and below the 
customer view. 


a 


Drag and drop to build your page 


| | Building blocks 
| Address | 


i i All a 
i i 


! 

i 

! 

i 

i 

i 

| 

1 

| 

| i | 
| ; | © horizontal 
i ; | 
t qi 

! 

i 

| 

| 

i 

! 

i 

f 

I 


¥ 


3. Search on the right for a button and drag it within the new horizontal section. 
| Note: buttons show the Next step dialog to choose what will happen when it is clicked. 
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4. Across from Callan action, click the Select button and select getCustomerID from the list of actions. 


Next step 


Callan action J#* getCustomerlD 


| Note: we must map the data this action needs from our app’s variables. 


5. For Input data, click the button to the right of each input, expand customer and select the correct 


variable to map. 


@ input data 
customerfirstName [x} firstName (String) 
customerlastName & & lastName (String) 


6. For Output data, click the button and then click New.... 


eu @ Output data 
customeniD (String) <> 


7. For Go to page, leave the default <Stay on page> as we don’t want to change the page but just refresh 


the data. 
8. Click OK. 
9. Next, search on the right for a plain text and drag it within the new horizontal section to the right of the 
new button. 
zip ; Drag and drop to build your page 


Building blocks 


All at 


ig 


10. Set the Label to Customer ID 
11. Click Select existing and then select the previously created customerID. 


Data mapping Data mapping 


This mapping links the component to a new or existing variable so This mapping links the component to a new or existing variable so 
you can reference the data later. you can reference the data later. 


Select existing Create new variable 


New variable name Default value (optional) Select existing variable Default value (optional) 


customeriD1 ® v 


12. Click OK. 
13. Click the button and select the pencil to rename it Lookup Customer ID. 


14. Click the button again and select the picture icon furthest to the right to change the icon. Try searching 


for search and choose your preferred icon for the button. 
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15. 


16. 
17. 


18. 
19; 


20. 


21. 
22. 


23. 
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Click the button again and click the gear icon to open the Configuration to access more advanced 
settings. Expand Appearance and try any setting changes you wish, such as editing Width to 250px so 
that the button will be about correct for the text. 


Properties 
General Configuration 
> Behavior 
» Appearance 
Color style: © Info 


Shape style: © Default 
Size © {2 Defautt 
Outline only: © 
Icon: © Ye cisearch 


Width © =| 


Click OK, and our first collapsible section is complete. 


Collapse the Customer info panel to make some room, search the right side for another collapsible 
panel and drag it below Customer Info. 


Name the new panel Documents. 

Open the properties (the gear icon) and change the following: 
a. Behavior: Initially collapsed checked and Panel group name to PG1 
b. Appearance: Color style to Success. 


Expand the Documents panel, then search on the right for Approval Content and drag inside the 
Documents panel. 


In Data association, create a new variable named document. 


Scroll to the bottom of the new Approval Content view, click to select the view and open the Properties 
(gear icon). 


Default Button 


On the General tab, confirm you correctly opened the Properties for the Approval Content view. 
Properties 


General Configuration 


Y Common 


Label: © fj Approval Content 


Help: © 


24. On the Configuration tab, enter the following for the Folder Name so the view is filtered to the desired 
folder in the content repository: //Focus Corp 


Properties 


General Configuration 


Folder Name: @ Jf //Focus Corp 


25. Click OK. 


Note: Now that you have used the editor a few times, the directions will be brief. Feel free to scroll up if 
and review some of the previous screenshots for examples if you are unsure of any action. 


26. Collapse the Documents panel to make room, search the right side for another collapsible panel and 
drag it below Documents. 


27. Name the new panel Approval Request. 

28. Open the properties (the gear icon) and change the following: 
a. Behavior: Initially collapsed checked and Panel group name to PG1 
b. Appearance: Color style to Warning. 


29. Expand the Approval Request panel, then search on the right for Decimal and drag inside the Approval 
Request panel. 


30. In Data association, set the Label to Amount and create a new variable named amount with no default 
value. 


31. Click OK. 

32. Open the properties (the gear icon) and change the following and Behavior: 
a. Decimal Places to 2 
b. Currency to a currency of your choice 

33. Click OK. 

34. Scroll to the bottom, click the Default Button and make the following edits: 
a. Next step (two bars with arrow): 


i. Across from Call an action, click the Select button and select Determine Pre-Approval 
from the list of actions. 


ii. Map the first input data to amount and the second to customerID. 
iii. For the output, create a new variable named approved. 
iv. For Go to page, select New page and name it Results. 

b. Change label (pencil): Set to Submit. 


c. Set the following to your preference: Select color (paint bucket), Select size (two boxes), Select 
icon (image). 
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35. In the upper-right, click Preview to deploy and run the current version of our app in the playback 
application engine. Wait a few seconds for a new browser window to appear and you can try out the 
app. 

a. First, note that if the preview window is wide, the address has multiple fields per line: 
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Approval 


= Department 


Customer info 


First Name Last Name 


Address 


Zip 


b. Whereas, if the preview window is smaller, the address fields are responsive and will move to be 
vertical. 


= Approval 
Department 


First Name Last Name 


zip 


c. Enter Alice for the First Name and User for the Last Name. 
d. Click the Lookup Customer ID button and see the field automatically set to 42. 
e. Enter any other name and the value will be set to NEW. 


f. Expand Documents and see the document list 


Approval 
===7= Department 


Documents a 
Customer Applications 
Q _sFilter displayed list results c ° 
Name Size Modified by Last modified 
© Approvals adam 04/12/2020 
© Customer p8admin 01/10/2020 
© _ Human Resources p8admin 01/10/2020 
(© Invoices p8admin 01/10/2020 
© Job Quotes p8admin 01/10/2020 
© Legal Review p8admin 01/10/2020 


i. Click the Approvals folder at the top 
ii. Click the plus sign and Add Document 
iii. Click File name and select a file from the Documents folder 
iv. Click Add. 
v. Click the name of the file to see the properties on the right. 


g. Expand Approval Request and enter a value in the Amount field and press TAB to see the 
formatting automatically added. 


= Approval 
Department 


Documents za 
Approval Request a 
Amount 

$100.00 


‘©IBM, 2020 
h. Click Submit button and confirm page changes to blank Results page. 
i. Close the preview window to go back to Studio. 


Congratulations, the starting page of your app is complete! 
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4.3 Create the Results and Onboarding Started Pages 


Now that we have our starting page is complete and integrated with Content Services (FileNet) and Decisions 
(ODM), we must create two more simple pages to show the results of the decision and launch the process in 
Workflow (BAW). 


1. At the top of the editor, under My Pre-Approval, click the Starting Page drop down and select Results. 


IBM Cloud Pak for Automation 


Back to apps / 


My Pre-Approval 


My Pre-Approval 


Note: the Results page was automatically created when setting the Next step dialog for the Submit 
button on the first page. 


2. Onthe right, select the All drop down and choose Variable. 


Drag and drop to build your page 


Building blocks 
input ck 
Informational A 
[ 
| 
Layout 
Zollap. 
Operational panel 
Chart 
Uncategorized Sustomer 


:' 
— oe 


3. Scroll down and drag the approved variable to the top Content box. 


¥ 


Drag and drop to build your page 


Building blocks 


Variable = 


@ versionStatus (Integer) 

e@ lastModifiedDate (Date) 

e@ lastModifiedBy (String) 
+! @ contentElements (CSContentElemer 
@ amount (Decimal) 


Localization resources v 
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If you like the resulting checkbox, move forward. Alternatively, you can edit it. 


[Es] My Pre-Approval'S 


Page: Resulsv 2 [ij 


(C1) Approved 


On the right, select the Variable drop down and choose All again, then search for a Horizontal layout 
and add it below the approved variable. 


On the right, search for button and add two buttons in the new horizontal layout. 
For the first button: 
a. Next step: Do not select any action and set Go to page to the Starting Page. 
b. Rename the button to Back 
c. Change the color, size and icon to your preference. 
For the second button: 
a. Nextstep: 
i. Across from Call an action, click the Select button and select Onboard Customer. 
ii. The input data should be automatically mapped. 
iii. For Go to page, select New page and name it Onboarding Started. 
b. Rename the button to Start Onboarding Process 
c. Change the color, size and icon to your preference. 


Note: If the approved checkbox is not checked, then we do not want to show the Start 
Onboarding Process button and this can be achieved using conditional visibility. This is a bit 
advanced but is accessible from the Advanced menus if you wish to do it. 


d. Optional: click alice in the upper right, select Preferences, change the View Mode to Advanced 
and click Save. 


e. Optional: click the Start Onboarding Process button and open the Properties (gear), click 
Visibility and enter a rule as pictured below. 


Properties 


General Positioning Configuration Events Visibility HTML attributes 


Source: Value @Rule |) Script 


Set to: Same as parent Y When: @ approved (Boolean Condition: Equal to v Value: 
Otherwise: |None ih] 
Add rule for: Variable 


f. Optional: Click OK when done and then change alice’s Preferences back to Basic View Mode. 


Page: Resutsv 2 [i] 


Approved 


ee Page dee 


9. At the top of the editor, under My Pre-Approval, click the Results drop down and select Onboarding 
Started. 


10. On the right, search for Display text and drag it to the page. 


11. Set the name of the display text to Onboarding Process Started! and set the size to your 
preference. 


12. On the right, search for button and add a button below the new display text and set as follows: 
a. Next step: Do not select any action and set Go to page to the <End application>. 
b. Rename the button to Start Another Approval. 


c. Change the color, size and icon to your preference. 
Page: OnboardingStartedv 2 [i] 


Onboarding Process Started! 


| Start Another Approval 


Congratulations, your app is now complete! 
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4.4 Preview the Completed App 


You are now ready to preview the entire app. Before we do, let’s open Workflow’s Process Portal so that we can 
confirm the process is launched. 


1. On the bookmark bar, open the following in a new browser tab: Workflow -> Process Portal. 
GS cre (500M (Workflow | Fj Others [5 Not Installed 


Ife} Process Portal | Eee 
IBM Workflow Center Open in a New Tab 


Open in a New Window 
Open in a New Private Window 


8 Process Admin Console 
® WAS Console 


Note: The first time Process Portal loads after the server starts it may take a long time to load, please 
give it at least 1 or 2 minutes. 


Once the Process Portal loads as pictured above, leave this tab open and go back to the Studio tab. 
In the upper-right, click Preview. 

Expand the first panel and enter Alice for the First Name and User for the Last Name. 

Click the Lookup Customer ID button and see the field automatically set to 42. 

Make sure to leave Alice, User and 42 as the values above for the decision to work 

Expand Documents and try based on preference. 

Expand Approval Request and enter 1000 in the Amount field and click Submit. 

Confirm the Approved field is checked (the decision worked). 

10. Click the Start Onboarding Process button and wait for the final page to appear. 


SO ST ON OTs BD 


11. Switch to the Process Portal browser tab and see the new task appear. If the task does not appear 
automatically, in the upper-left, click Work to refresh the list. 


alsioiieclt tad 2 e 


= Step: Onboard Customer 


Onboard Customer:453 
Due: Apr 14, 2020, 10:19:30 AM 
> 


12. Click the name of the task, Step: Onboard Customer, claim it and wait for the UI to appear where you 
can see the data passed from the app to the workflow, then complete the task. 


— Step: Onboard Customer : 


Task Data Task Details 


Input a 


Customer ID 


Amount 


Output a 
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| Note: As before, the first time this task type loads after the server starts it may take a long time to load. 


| Note: This is a placeholder onboarding process and contains only one task. 
13. Switch back to the Studio browser tab. 
14. At the upper-left, click Back to apps. 


BM Cloud Pak for Automation 


My Pre-Approval 


15. On the tile for your app, click the three-dot menu in the upper-right and select Request publish. 


——— Update details 


My Pre-Approval Export 


Archive 


Request publish 
> >) 


°o 


Details 


16. Enter a name for the new snapshot such as V1. 0 and click Request publish. 


Request to publish My Pre-Approval (V1.0) oe 


Snapshot name 
V1.0 I 


Description 


Highlight your text to see formatting options. 


Description 


Request publish 


Congratulations, you just successfully tested your first business app and requested the IT team publish it! 
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5 Deploy and Run the App 


Now that our app is complete, the IT Administrator can deploy it from Studio to Navigator for end users to 
access and use. 


5.1 Tour Navigator 


Let’s take a look at the Business Automation Navigator interface, the unified user experience for end users of the 
Cloud Pak for Automation. Previously known as Content Navigator within FileNet, Business Automation 
Navigator support additional capabilities from across the Cloud Pak for Automation such as Applications. The 
app you built is deployed as a feature within Navigator. 


1. On the bookmark bar, open Navigator in a new browser tab. 


@ Studio BZ Naviaator 


|_PS_CPE PS_ODM_ Ba Workfle 


Open in a New Window 


Open in a New Private Window 


2. Click the three-bar menu at the upper-left and see the available features listed for this Navigator 
desktop (your list may be different than pictured below). 


= __IBM Navigator IBM Navigator 


(© Favorites 


Browse 


OD 


Search 


of 


Job Quote 


of 


MortgageApproval 


of 


Focus Corp Content 


S 


Pre-Approval App 


3. Select Browse to see the list of folders in FileNet and expand the Focus Corp folder. 


Refresh | Add Document | New Folder 
P8Repo 
Name T Modified By 
>» (>) Customer 
(0 Focus Corp p8admin 

> © Human Resources 

> © Invoices 

> © Job Quotes 


> © Legal Review 
> © Mortgage 

> © Operations 

> [5 Travel 
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4. Click the three-bar menu at the upper-left and select a sample app such as Job Quote. 


IBM Navigator 


MortgageApproval 


Focus Corp Content 


Ee NAMM MILE 


State ry 
San Francisco, CA 94105 Ros Oka 
cA at i ty Bridge 
- SQUARED TS Fey |PIOZONN 
City ea" armmers\ Markel. = 
@ FINANCIAL yw oN 
San Francisco DISTRICT y \ 
Postal Code Gate \ 
San Francisco Museum 
94105 ofModern Art 
————— on Square _jemporarity closed » 
RINCON HILL 
PX p + 
bs | 9 %, Rant Cnen _ 
meechildren's "> yy Google j= —_ 
reativity MUSCUIT seaodea ©2020 Gooye ‘Temsof Use Report amaperror 
Flooring Type 
© Hardwood 
oO Tile 
Oo Carpet 
Square Footage 
1,000 
Job Quote 
6,000 
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5.2 Deploy the App 


Now that we know Navigator, it is time for the IT Administrator to deploy our new app. 


1. Scroll down and click on the Apps tile. 
Oo 
oo 
Apps 


Automate work by quickly building user 
interfaces that integrate tasks and data. 


Viewall > 


2. Locate the tile for your app that shows a Publish requested status and click the Details link. 


wi 


My Pre-Approval 


Publish requested 


° 
3. Select the Snapshots tab. 
Back to apps / 


My Pre-Approval (MPA) 
Overview Permissions 


4. Locate the snapshot that has Publish requested listed, follow that row to the right and click on the 


three-dot menu for that row. 
Snapshots (1) © 


Name + Status Created > 


alice 


= see 4/13/2020, 11:29:14 PM 


alice 


> V1.0 (V1.0) Publish requested 4/14/2020, 2:25:36 AM 
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Q _All 


Last updated 


alice 
4/14/2020, 2:25:36 AM 


alice 
4/14/2020, 2:25:37 AM 


i 
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5. Select Export and choose Export this project to be published (.zip) and click Export. 


Export the snapshot ~ 


Update details 


Select the type of file to export 


Clone 


Archive 
Test 


6. Choose a location to save the file (Such as Downloads or Desktop). 
7. To becertain all systems are logged out, close the Firefox browser completely, all tabs and windows. 


8. Open anew Firefox browser, go to the Navigator bookmark and log in as adam / passwOrd (who has 
administrator permission). 

9. Click the three-bar menu at the upper-left and select Administration (only adam has access so if you do 
not see it make sure all browser windows are closed and opening a new one to Navigator). 


— IBM Navigator +O | Administration 


10. On the left click Connections, then double click App Engine. 


== P ° Platform Repositories 
— IBM Navigator 


New Connection v | Edit 


— — 
=| App Engine 


Sync Services 


11. Click the Connect button, then click the Applications tab. 


Desktops x Connections x AppEngine x 
Close 


App Service Connection: App Engine 


General 


* Display name: © App Engine 


*10: © Pear 


-@® 
* App Servicegendpoint URL: @) https://playback.10.0.0.10.nip.io/v1/applic 


12. Click the Import button, locate the file exported from Studio and open it. After a few seconds, the app is 
imported and available to be added to a desktop. 


Desktops x Connections x AppEngine x 


App Service Connection: App Engine 


Ea 


13. On the left, click Desktops, then double click the Default desktop to open it. 


Name 


(3 Admin Desktop 


Connections yg 8 


14. Wait a few seconds for the line to appear below Layout and then click to open the tab. 


Desktop: Default 


General Connections Appearance 


15. Scroll to the Displayed features section, locate your app and select the checkbox to add it to the 
desktop’s features. 


General Connections Layout Appearance Menus 
* Displayed Move Up 
features: © 

Feature 

Pre-Approval App 

Teamspaces 

Work 

Entry Template Manager 

Asynchronous Tasks 


KragonSampleApp 


OOOdd0.o gs 


NewSampleApp 


My Pre-Approval 


16. At the top, click Save. 
17. Refresh the Navigator browser tab to reload the new desktop configuration. 


Congratulations, the IT Administrator successfully deployed your first business app to Navigator! 
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5.3 Run the App in Navigator 


The app is now deployed and you available in Navigator to end users. When accessing the app, it will appear 
very similar to the Preview in Studio. 


IBM Navigator 


Approval 


= Department 


City State Zip 


[@ tector a 


Documents 


Approval Request 


v Submit 
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For these steps, we will again become a business user. You should already have a Process Portal tab open in 
your browser. 

1. Make sure you refreshed the browser after configuring the Desktop features before continuing. 

2. Click the three-bar menu at the upper-left and select the name of your business app: My Pre-Approval. 


w ao 
Bb 3 
3 = 
g o 
= ® 


Oe Job Quote 
Qe MortgageApproval 


Oe Focus Corp Content 
WA Pre-Approval App 


Gs My Pre-Approval 


50 3 Administration 
3. Enter Alice for the First Name and User for the Last Name. 


Click the Lookup Customer ID button and see the field automatically set to 42. Make sure to leave Alice 
and 42 as the values above for the decision to work. 


5. Expand Documents and try based on preference. 
Expand Approval Request and enter 1000 in the Amount field and click Submit. 
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7. Confirm the Approved field is checked (the decision worked). 
Click the Start Onboarding Process button and wait for the final page to appear. 
9. Switch to the Process Portal browser tab (or open a new one) and see the new task appear. 


10. If prefer like, click the name of the task, claim it and wait for the UI to appear where you can see the 
data passed from the app to the workflow and complete the task. If the task does not appear 
automatically, in the upper-left, click Work to refresh the list. 


11. Switch back to the Studio browser tab (or open a new one). 


12. On the Snapshots tab of the My Pre-Approval app and locate the snapshot that has Publish requested 
listed. 


13. Follow that row to the right, click on the three-dot menu for that row and select Status. 


Update details 


Clone 
14. Set the status to Released and then click OK. 
Set the status of the snapshot a 
To manage your development (such as testing, approvals, and reuse), select a status or createa 
status for your snapshot. 
| Existing New 
Select an existing status 
© Validated 


New 
© Publish requested 


| _C Rejected 
1) Retoased] 


Cancel OK 


Congratulations, you successfully deployed and ran your first business app! 
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6 Conclusion and Next Steps 


Congratulations! You successfully reviewed the available toolkits and templates in Studio, created a new 
business app from a template, continuously validated the new business app through previews, deployed that 
business app and ran it in Navigator. 


If you would like to experience more, feel free to use the remaining time to edit or run some of the other 
samples on the system. You may also wish to create a new toolkit, template or app of your own design. 


Thank you for your interest in Cloud Pak for Automation. 
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